﻿@model IndoReputation.Views.ViewModels.OfficeViewModel
@{
    ViewBag.Title = "Add Office";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section _Right {
    @Html.Partial("_Right")
}
<h2>
    Add Office</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <div class="form-data">
            <table class="table-data">
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.OfficeType, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @( Html.Telerik().ComboBoxFor(model => model.OfficeTypeID)
                                .Name("OfficeTypeID")
                                .BindTo(new SelectList(Model.OfficeType, "Value", "Text"))
                                .Placeholder("Select Office Type")
                                .SelectedIndex(0)
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .HighlightFirstMatch(true)
                            )
                            @Html.ValidationMessageFor(model => model.OfficeTypeID)
                        </div>
                    </td>
                </tr>
                <tr>                    
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.Country, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @( Html.Telerik().ComboBoxFor(x => x.CountryID)
                                .Name("CountryID")
                                .BindTo(new SelectList(Model.Country, "Value", "Text"))
                                .Placeholder("Select Country...")
                                .SelectedIndex(0)
                                .CascadeTo("CityId")
                                .DropDownHtmlAttributes(new { style = " white-space:nowrap;" })
                                .Filterable(filtering =>
                                {
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .HighlightFirstMatch(true)
                            )
                            @Html.ValidationMessageFor(model => model.CountryID)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.City, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @( Html.Telerik().ComboBoxFor(x => x.CityId)
                                .Name("CityId")
                                .DataBinding(binding => binding.Ajax().Select("_GetDropDownListCity", "Office"))
                                .ClientEvents(events => events.OnDataBound("ComboBox_OnDataBound"))
                                .Placeholder("Select City...")
                                .SelectedIndex(0)
                                .Filterable(filtering =>
                                {   
                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                })
                                .HighlightFirstMatch(true)
                            )
                            @Html.ValidationMessageFor(model => model.CityId)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.Name, null, true)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @Html.EditorFor(model => model.Name)
                            @Html.ValidationMessageFor(model => model.Name)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.LabelFor(model => model.Description)
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @Html.EditorFor(model => model.Description)
                            @Html.ValidationMessageFor(model => model.Description)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td-label">
                        <div class="editor-label">
                            @Html.Label("Status")
                        </div>
                    </td>
                    <td class="td-control">
                        <div class="editor-field">
                            @Html.CheckBoxFor(model => model.IsEnable)
                            @Html.ValidationMessageFor(model => model.IsEnable)
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <p class="dvbutton">
                            <input type="submit" value="Create" />
                        </p>
                    </td>
                </tr>
            </table>
        </div>
    </fieldset>
}
<div class="div-back">
    @Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
    function ComboBox_OnDataBound(e) {
        var combobox = $(this).data('tComboBox');
        combobox.enable();
        combobox.value(null);
        combobox.text('Select City...');
    }
</script>
